<template>
  <div ref="chart" class="chart" />
</template>
<script>
// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts/core'
// 引入柱状图图表，图表后缀都为 Chart
import { FunnelChart } from 'echarts/charts'
// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  LegendComponent,
  ToolboxComponent
} from 'echarts/components'
  // 标签自动布局，全局过渡动画等特性
import { LabelLayout, UniversalTransition } from 'echarts/features'
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from 'echarts/renderers'

// 注册必须的组件
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  FunnelChart,
  LabelLayout,
  UniversalTransition,
  CanvasRenderer,
  LegendComponent,
  ToolboxComponent
])
import BigNumber from 'bignumber.js'
export default {
  name: 'SaleChart',
  mounted(data) {},

  methods: {
    initChart(data) {
      const sourceData = data.sourceData
      const legend = data.legend
      // 构造data
      const maxValue = Math.max.apply(
        null,
        data.list.map((m) => m.value)
      )
      const funeelData = data.list.map((m) => {
        return {
          value: BigNumber(m.value)
            .dividedBy(maxValue)
            .multipliedBy(100)
            .toNumber(),
          name: m.name,
          saleStage: m.saleStage
        }
      })
      // 设置配置项
      var myChart = echarts.init(this.$refs.chart)
      myChart.setOption({
        color: ['#1584ff', '#18c0fe', '#ffba19', '#fe5208', '#00ca7b'],
        grid: {
          top: '4%',
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        title: {
          text: data.title,
          x: 'center',
          textStyle: {
            color: '#333333',
            fontSize: 14,
            fontWeight: 'normal'
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: (params, ticket, callback) => {
            const d = params.data
            const list = data.list

            const l = list.find((f) => f.name === d.name)

            // chazha
            return `${d.name}<br/>金额：￥${l.value}<br/>商机数：${l.businessCount}`
          }
        },

        legend: {
          icon: 'circle',
          bottom: '0',
          itemHeight: 8,
          itemWidth: 8, // 图例图标的宽度
          itemGap: 8, // 图例图标与文字间的间距
          data: ['初步接洽', '需求确定', '方案/报价', '谈判审核', '赢单'],
          textStyle: {
            fontSize: 12
          },
          ...legend
        },
        series: [
          {
            name: 'Funnel',
            type: 'funnel',
            left: '10%',
            top: 30,
            bottom: 60,
            width: '80%',
            min: 0,
            max: 100,
            minSize: '0%',
            maxSize: '100%',
            sort: 'descending',
            gap: 0,
            label: {
              show: true,
              position: 'inside',
              formatter: (params) => {
                const f = data.list.find((f) => f.name === params.name)
                if (f) {
                  return '￥' + f.value
                }
                return ''
              }
            },
            labelLine: {
              length: 10,
              lineStyle: {
                width: 1,
                type: 'solid'
              }
            },
            itemStyle: {
              borderColor: '#fff',
              borderWidth: 0
            },
            emphasis: {
              label: {
                fontSize: 14
              }
            },
            data: funeelData
          }
        ]
      })
      window.addEventListener('resize', () => {
        myChart.resize()
      })
      myChart.on('click', 'series', (param) => {
        //
        this.$emit('handle', param)
      })
    }
  }
}
</script>
<style lang="scss" scoped>
  .chart {
    height: 300px;
  }
</style>
